<template>
  <div>
    <el-container>
      <el-header class="header">
        <div class="border">
          <div class="center">
            <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" router>
              <el-menu-item index="./shouye">
                <img src="../assets/pic.svg" style="height: 34px" />
              </el-menu-item>
              <el-menu-item index="./shouye">首页</el-menu-item>
              <el-menu-item index="./xingqiu">星球</el-menu-item>
              <el-menu-item index="./question">养宠问答</el-menu-item>
              <el-menu-item index="./lingyang">领养宠物</el-menu-item>
              <div class="right">
                <el-menu-item index="6">搜索框</el-menu-item>
                <el-button class="btn">登录</el-button>
                <el-button class="btn">快速注册</el-button>
              </div>
            </el-menu>
          </div>
        </div>
      </el-header>
      <el-main><router-view /></el-main>


      <!-- <el-footer>
        <el-row class="row">
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>文章聚合</span>
              </div>
              <div class="text item">
                <a href="https://www.chongwuzhi.com/article/2221.html">上海一柯基被打死
                  主人发生:当流浪狗也要比被打死强</a><br><span>11个月前</span><br>
                <a href="https://www.chongwuzhi.com/article/1583.html">猫为什么要吃老鼠?而有些猫却对老鼠不感兴趣?</a><br><span>1年前</span><br>
                <a href="https://www.chongwuzhi.com/article/1533.html">猫咪走路后腿贴着地面?有可能是猫糖尿病在作怪!</a><br><span>1年前</span><br>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>账号管理</span>
              </div>
              <div class="text item">
                <img width="38px" src="../assets/pic2.png" alt="">
                <img width="38px" src="../assets/pic3.png" alt="">
                <img width="46px" height="46px" src="../assets/pic4.jpg" alt="">
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>链接组</span>
              </div>
              <div class="text item">
                <div>
                  <img width="40px" src="../assets/jiao4.png" alt="">
                  <a href="https://www.chongwuzhi.com/hospital"><b>信息展示</b></a>
                  <p>宠物信息</p>
                </div>
                <div>
                  <img width="40px" src="../assets/jiao5.png" alt="">
                  <a href="https://www.chongwuzhi.com/hospital"><b>宠物用品</b></a>
                  <p>入驻宠物志好物</p>
                </div>
                <div>
                  <img width="40px" src="../assets/jiao6.png" alt="">
                  <a href="https://www.chongwuzhi.com/hospital"><b>隐私政策</b></a>
                  <p>本站的隐私政策</p>
                </div>
                <div>
                  <img width="40px" src="../assets/jiao7.png" alt="">
                  <a href="https://www.chongwuzhi.com/hospital"><b>给我留言</b></a>
                  <p>给宠物志站长留言</p>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <img width="207px" height="50px" src="../assets/pic.svg" alt="">
              </div>
              <div class="text item">
                <p>-----
                  宠物志是一个宠物主人交流学习的非盈利性的平台，网站成立于2021年08月06日，在2022年4月份正式改版为养宠交流，致力成为养宠一站式服务交流平台！</p>
                <p>找站长请联系:</p>
                <p>站长QQ：8322007</p>
                <p>电子邮件：wzh0324@foxmail.com</p>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </el-footer> -->
    </el-container>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>

.row{
  display:flex;
}
.header {
  width: 100vw;
}

.center {
  width: 70vw;
  margin: 0 auto;
  position: relative;

}

.right {
  display: flex;
  position: absolute;
  right: 0%;
  text-align: center;
  justify-content: center;
}

.btn {
  height: 33px;
  margin: auto;
}

.el-menu.el-menu--horizontal {
  border: none;
}

.border {
  width: 100vw;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

.site-footer .widget {
  width: 25%;
}

:root {
  --b2lightcolor: rgba(221, 153, 51, 0.2);
  --b2radius: 4px;
  --b2color: #dd9933;
  --b2light: rgba(221, 153, 51, 0.03);
}
.div{
  margin: 0;
  padding: 0;
}
</style>
